<template>
  <div>
    <div v-if="crud.props.searchToggle">
      <el-input
        type="text"
        placeholder="输入用户名搜索"
        style="width: 200px;"
        size="small"
        class="filter-item"
        v-model="query.userName"
      />
      <rrOperation :crud="crud" />
    </div>
    <crudOperation :permission="permission" />
    <el-table ref="table" size="small" v-loading="crud.loading" :data="crud.data" row-key="id" @select="crud.selectChange" @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="userName" label="姓名"></el-table-column>
      <el-table-column prop="sexId" label="性别"></el-table-column>
      <el-table-column prop="birthday" label="出生日期"></el-table-column>
      <el-table-column prop="jobId" label="岗位"></el-table-column>
      <el-table-column prop="deptId" label="部门"></el-table-column>
      <el-table-column prop="isValid" label="有效性">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isValid"
            active-value="Y"
            inactive-value="N"
            active-color="#409EFF"
            inactive-color="#F56C6C"
            @change="changeIsValid(scope.row)"/>
        </template>
      </el-table-column>
      <el-table-column  prop="sysCreateTime" label="创建时间"></el-table-column>
      <el-table-column  prop="sysCreateUserId" label="创建人"></el-table-column>
      <el-table-column
        label="操作"
        width="125"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <udOperation :permission="permission"  :data="scope.row"/>
        </template>
      </el-table-column>
    </el-table>
    <pagination></pagination>

    <crudOption ></crudOption>

  </div>
</template>
<script>
import { switchCallback } from '@/utils/index'
import crudAPI from '@/api/system/user'
import CRUD, {presenter, header, crud} from '@/components/f-crud/f-crud'
import {rrOperation, crudOperation, udOperation, pagination} from '@/components/f-crud'
import crudOption from './option/crud-option'

export default {
  mixins: [presenter(), header(), crud()],
  components: {pagination, crudOperation, rrOperation, udOperation, crudOption},
  cruds () {
    return CRUD({title: '用户', url: crudAPI.list, crudMethod: { ...crudAPI }, query: {'isDelete': 'N'}})
  },
  data () {
    return {
      permission: {
        add: ['admin', 'putong'],
        edit: ['admin', 'putong'],
        del: ['admin', 'putong']
      }
    }
  },
  created () {
    // 需要显示的头部按钮
    this.crud.optShow = {
      add: true,
      edit: true,
      del: true,
      download: true
    }
  },
  methods: {
    changeIsValid (data) {
      this.$confirm('此操作将用户有效性状态修改, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudAPI.edit(data).then(res => {
          if (res.status === 200) {
            this.crud.editSuccessNotify('用户有效性状态修改成功')
          } else {
            data.isValid = switchCallback(data.isValid)
            this.crud.editErrorNotify('用户有效性状态修改失败')
          }
        }).catch(() => {
          data.isValid = switchCallback(data.isValid)
        })
      }).catch(() => {
        data.isValid = switchCallback(data.isValid)
      })
    }
  }
}
</script>
<style>
</style>
